<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>大模型交互平台</title>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            /* flex-direction: column; */
            font-family: 'Segoe UI', sans-serif;
        }

        body {
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        }

        /* 法律天平LOGO水印 */
        body::before {
            content: "⚖️";
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(15deg);
            font-size: 20vw;
            color: rgba(0, 123, 255, 0.08);
            z-index: 0;
            pointer-events: none;
            animation: logoFloat 12s infinite linear;
        }

        /* AI科技感动态网格 */
        body::after {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(0, 123, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 123, 255, 0.03) 1px, transparent 1px);
            background-size: 40px 40px;
            z-index: 0;
            pointer-events: none;
        }

        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0; /* 防止内容溢出 */
        }

        .reference-column {
            width: 300px; /* 改为flex布局 */
            flex: 0 0 300px; /* 不伸缩、基础宽度300px */
            height: 100vh;
            background: #f8f9fa;
            border-left: 1px solid #ddd;
            padding: 1rem;
            display: flex;
            flex-direction: column;
        }

        .header-toolbar {
            display: flex;
            gap: 1rem;
            margin-left: auto; /* 右对齐 */
        }

        #header {
            padding: 1rem;
            background: #f5f5f5;
            border-bottom: 1px solid #ddd;
            display: flex;
            gap: 1rem;
        }

        #chat-container {
            flex: 1;
            overflow-y: auto;
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .user-message {
            align-self: flex-end;
            background: #e3f2fd;
            padding: 0.8rem;
            border-radius: 1rem;
            max-width: 70%;
        }

        .bot-message {
            align-self: flex-start;
            background: #f5f5f5;
            padding: 0.8rem;
            border-radius: 1rem;
            max-width: 70%;
            position: relative;
        }

        .model-tag {
            position: absolute;
            top: -0.8rem;
            left: 0;
            font-size: 0.8rem;
            color: #666;
        }

        #input-container {
            padding: 1rem;
            background: #fff;
            border-top: 1px solid #ddd;
            display: flex;
            justify-content: center;
        }

        #input-box {
            width: 60%;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 2rem;
            outline: none;
        }

        #submit-btn {
            padding: 0.8rem 2rem;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 2rem;
            cursor: pointer;
        }

        .model-name {
            font-weight: 600;
            color: #007bff;
            margin-right: 0.5rem;
        }

        .message-content {
            margin-top: 0.5rem;
            color: #333;
        }

        #model-select {
            padding: 0.8rem 2.5rem 0.8rem 1.5rem;
            border: 1px solid #007bff;
            border-radius: 2rem;
            background: linear-gradient(to bottom, #f8f9fa, #fff);
            color: #2c3e50;
            font-weight: 500;
            appearance: none;
            -webkit-appearance: none;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="%23007bff" d="M7 10l5 5 5-5z"/></svg>');
            background-repeat: no-repeat;
            background-position: right 1rem center;
            transition: all 0.3s ease;
        }

        #model-select:hover {
            box-shadow: 0 2px 8px rgba(0,123,255,0.2);
        }

        #model-select:focus {
            outline: none;
            border-color: #0056b3;
        }

        #url-select-container {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        #url-select {
            flex: 1; /* 占满剩余空间 */
            min-height: 200px; /* 最小高度 */
            width: 100%; /* 宽度填满容器 */
            margin-top: 0.5rem;
        }

        #url-select {
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: box-shadow 0.3s ease;
        }

        #url-select option {
            padding: 0.8rem 1rem;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
        }

        #url-select option:checked {
            color: #333 !important;
            background: linear-gradient(135deg, #e3f2fd, #bbdefb);
            border-left: 4px solid #007bff;
            font-weight: 600;
        }

        #url-select option {
            color: #333; 
        }

        #url-select option:hover {
            background: #f8f9fa;
        }

        #url-select option:checked::after {
            content: "✓";
            color: #007bff;
            position: absolute;
            right: 1rem;
            font-weight: bold;
        }

        #url-select option.select-feedback {
            transform: scale(0.98);
            background: rgba(0,123,255,0.1);
        }

        @media (max-width: 768px) {
            .reference-column {
                width: 250px;
            }
            #input-box {
                width: 80%;
            }
        }

        .markdown-content h1, .markdown-content h2, .markdown-content h3 {
            color: #2c3e50;
            margin: 1rem 0;
        }
        
        .markdown-content ul {
            padding-left: 2rem;
            list-style: disc;
        }

        .markdown-content code {
            background: #f4f4f4;
            padding: 0.2rem 0.4rem;
            border-radius: 3px;
        }

        .markdown-content a {
            color: #007bff;
            text-decoration: underline;
        }

        .model-tag.highlight-tag {
            display: inline-block;
            padding: 4px 12px;
            background: linear-gradient(135deg, #2196F3, #1976D2);
            color: white !important;
            font-weight: 600;
            border-radius: 16px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin: -8px 0 8px 0;
            position: relative;
            text-transform: uppercase; /* 字母大写 */
            letter-spacing: 0.5px; /* 字间距 */
            font-size: 0.9em;
            border: 1px solid rgba(255,255,255,0.3); /* 增加层次感 */
        }
    </style>
</head>
<body>
    <div class="main-content">
        <div id="header">
            <select id="model-select">
                <option value="ERNIE-Bot-4">文心一言 4.0</option>
                <option value="ChatGLM-4-Plus">智谱清言 4.0 Plus</option>
                <option value="Spark-4-Ultra">讯飞星火 4.0 Ultra</option>
                <option value="XuanYuan">轩辕</option>
                <option value="DeepSeek-R1">DeepSeek R1</option>
                <option value="LLaMA-2">LLaMA 2.0</option>
            </select>
        </div>

        <div id="chat-container"></div>

        <div id="input-container">
            <div style="width: 80%; display: flex; gap: 0.5rem;">
                <input type="text" id="input-box" placeholder="请输入您的问题...">
                <button id="submit-btn">发送</button>
            </div>
        </div>
    </div>
    <div class="reference-column">
        <h3 style="margin: 0 0 1rem 0; color: #666;">参考网站 (多选)</h3>
        <div id="url-select-container">
            <select multiple id="url-select">
                <option value="https://www.baidu.com">百度搜索</option>
                <option value="https://www.cnki.net">中国知网</option>
                <option value="https://www.findlaw.com">FindLaw</option>
                <option value="https://wenshu.court.gov.cn">中国裁判文书网</option>
                <option value="https://tingshen.court.gov.cn">中国庭审公开网</option>
                <option value="https://www.chinacourt.org">中国法院网</option>
                <option value="https://flk.npc.gov.cn">国家法律法规数据库</option>
                <option value="https://www.china-arbitration.com">中国仲裁网</option>
                <option value="https://www.cnipa.gov.cn">国家知识产权局</option>
                <option value="https://www.sse.com.cn">上海证券交易所</option>
                <option value="https://www.szse.cn">深圳证券交易所</option>
                <option value="https://www.cfae.cn">北京金融资产交易所</option>
                <option value="https://www.stats.gov.cn">国家统计局</option>
                <option value="https://www.ncac.gov.cn">国家版权局</option>
                <option value="https://www.gov.cn/zhengce/xxgk">国务院文件库</option>
            </select>
        </div>
    </div>

    <script>
        const chatContainer = document.getElementById('chat-container');  // 聊天记录容器
        const inputBox = document.getElementById('input-box');  // 输入框
        const modelSelect = document.getElementById('model-select');  // 模型选择下拉框
        const submitBtn = document.getElementById('submit-btn');  // 提交按钮
        const urlSelect = document.getElementById('url-select');   // 选择右侧参考网站

        // 添加用户消息
        function addUserMessage(question) {
            const userDiv = document.createElement('div');
            userDiv.className = 'user-message';
            userDiv.textContent = question;
            chatContainer.appendChild(userDiv);
            chatContainer.scrollTop = chatContainer.scrollHeight;  // 自动滚动到底部
        }

        // 添加模型回复
        function addBotMessage(model, markdownResponse) {
            const botDiv = document.createElement('div');
            botDiv.className = 'bot-message';
            
            // 模型标签（保持原逻辑）
            const tagSpan = document.createElement('span');
            tagSpan.className = 'model-tag highlight-tag'; // 添加新样式类
            tagSpan.textContent = `${model} 回复`;
            
            // Markdown解析容器
            const contentDiv = document.createElement('div');
            contentDiv.className = 'markdown-content';
            
            // 安全解析Markdown（自动转义HTML标签）
            contentDiv.innerHTML = marked.parse(markdownResponse, {
                breaks: true, // 换行符转换为<br>
                sanitize: true // 防止XSS攻击
            });
            
            botDiv.appendChild(tagSpan);
            botDiv.appendChild(contentDiv);
            chatContainer.appendChild(botDiv);
            chatContainer.scrollTop = chatContainer.scrollHeight;  // 自动滚动到底部
        }

        // 添加按钮监听事件
        submitBtn.addEventListener('click', () => {
            const question = inputBox.value.trim();
            if (question) {
                addUserMessage(question);
                inputBox.value = '';
                // 获取选择的模型
                const model = modelSelect.value;  
                let messageString = null;
                if (model === 'Spark-4-Ultra') {
                    messageString = question;                 
                }
                else {
                    // 获取选择的参考网站
                    const selectedOptions = Array.from(urlSelect.selectedOptions); 
                    const references = selectedOptions.map(option => ({
                        url: option.value,
                        name: option.text
                    }));
                    messageString = JSON.stringify({
                        question: question,
                        references: references.filter(ref => ref.url)
                    });                       
                }
                // 调用模型
                fetch('http://localhost:5000/chat', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        message: messageString,
                        model: model
                    })
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.error) {
                        alert(data.error);
                    } else {
                        addBotMessage(model, data);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                });
            }
        });

        // 添加回车键监听事件
        inputBox.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                submitBtn.click();
            }
        });

        // 参考网站选中效果
        document.getElementById('url-select').addEventListener('mousedown', function(e) {
            e.preventDefault();
            const option = e.target;
            if (option.tagName === 'OPTION') {
                // 切换选中状态
                option.selected = !option.selected;
                // 视觉反馈
                option.classList.add('select-feedback');
                setTimeout(() => option.classList.remove('select-feedback'), 200);
            }
        });

    </script>
</body>
</html>
